Einbinden von Image-Maps

Die Erstellung von Imagemaps

Hierfür benötigen Sie grundsätzlich 3 "Zutaten":

• 1 Bild im GIF-Format
• 1 Map-Datei
• 1 Imagemap-Programm

Die Map-Datei

Eine Map-Datei enthält die Koordinaten Ihrer verweis-sensitiven Grafik und die zugeordneten URLs. Um eine Map-Datei zu erstellen, öffnen Sie Ihr Bild in einem Programm wie z.B. Mapedit und fahren die gewünschten Regionen Ihrer Grafik mit der Maus nach. Dadurch werden die Koordinaten automatisch in Ihre Map-Datei geschrieben und nun koennen Sie diesem Bereich die entsprechende URL zuordnen. Relative Pfadnamen ( /Verzeichnis/*.htm ) sind dann erlaubt, wenn sich die Seiten, auf die verzweigt werden soll, in dem selben Domain befinden, ansonsten wird der absolute Pfadname verwendet ( http://www.verio.de/Verzeichnis/*.htm ).

Allerdings müssen Sie beachten, daß Map-Dateien verschiedene Formate haben können, je nachdem, welchen Typ von Imagemap-Programm Ihr Server anbietet. Das Imagemap-Programm "htimage", welches der VERIO-Server Ihnen zur Verfügung stellt, basiert auf CERN, so daß Sie beim Erstellen Ihrer Map-Datei dieses CERN-Format einstellen sollten.

Abschliessend speichern Sie dann Ihre Datei mit der Endung .map in das selbe Unterverzeichnis Ihres Domains, indem sich auch Ihre Grafik ( *.gif ) befindet. Um einem Mapping Server Error vorzubeugen, entfernen Sie am besten alle "Carriage return"-Symbole (^M) aus Ihrer Map-Datei, falls Ihr Programm dies nicht von sich aus getan hat.

Derjenige Bereich Ihrer Grafik, der nicht einem speziellen Link zugeordnet ist heißt "default region". Sollten Sie wünschen, daß jeder, der auf diese "default region" klickt, auf eine bestimmte Seite ( z.B. faq.htm ) verzweigen soll, dann fügen Sie einfach eine Zeile, ähnlich der folgenden, in Ihre Map-Datei ein:

default /Ihr_Verzeichnis/faq.htm
default http://www.Nicht_Ihr_Domain.com/Verzeichnis/faq.htm

<zurück>

Zeit für eine Beispiel-Map-Datei:

    default http://www.faq.de/cgi/imagemaps/default.htm
    polygon (11,9) (148,9) (10,45) (11,9) http://www.faq.de/cgi/imagemaps/dreieck.htm
    circle (129,60) 15 http://www.faq.de/cgi/imagemaps/kreis.htm
    rectangle (12,56) (91,88) http://www.faq.de/cgi/imagemaps/rechteck.htm

WICHTIG: Geben Sie bei den Dateien den Pfad mit an!

Map-Dateien können Sie beispielsweise mit dem Programm Mapedit erstellen. Sowohl die UNIX- als auch die Windows-Version von Mapedit finden Sie unter:
http://www.boutell.com/mapedit/
Sollten Sie einen Macintosh benutzen, so können Sie WebMap benutzen:
http://www.city.net

<zurück>

Das Imagemap-Programm

Ein Imagemap-Programm ist ein CGI-Programm, welches die Map-Dateien auswertet und die Links ausführt. Es liest sozusagen die Map-Datei, vergleicht die tatsächlich angeklickten Pixelkoordinaten der Grafik, die ihm der Browser sendet, mit der Aufstellung in der Map-Datei. Liegt der angeklickte Bereich innerhalb einer als verweis-sensitiv definierten Fläche, so wird ermittelt, welche URL diesem Bereich zugeordnet ist. Anschliessend gibt das Programm diese URL an den Browser weiter, der dann den Link ausführt.

Der Bequemlichkeit wegen können Sie das Imagemap-Programm "htimage" von CERN verwenden, welches sich im cgi-bin-Verzeichnis des VERIO-Servers befindet. Aber es ist Ihnen natürlich freigestellt, selbst ein solches CGI-Skript zu schreiben, wenn Sie es dann in Ihrem eigenem cgi-local-Verzeichnis speichern (Übertragungsmodusmodus: ASCII !).

Eine Dokumentation zu CERN's "htimage" finden Sie unter:
http://www.w3.org/hypertext/WWW/Daemon/User/CGI/HTImageDoc.html

<zurück>

Der HTML-Code eines Imagemaps

Dafür, daß der Browser auch weiß, daß es sich bei dem eingebundenen Bild um ein Imagemap handelt, ist der Ausdruck ISMAP verantwortlich:

<IMG SRC="/Verzeichnis/image.gif" ISMAP>

Nun wird um diese Grafik eine Referenz gelegt, welche auf das Imagemap-Programm zeigt und den Pfad Ihrer Map-Datei angibt. Diese URL ist also eine Kombination aus zwei verschiedenen Informationen. Nehmen wir an, Sie haben Ihr Bild und Ihre Map-Datei in ein Unterverzeichnis Ihres Domains gespeichert, welches Sie selbst erstellt haben und das den Namen "bilder" trägt: www.Ihr_Domain.com/bilder:

<A HREF="/cgi-bin/htimage/anleitung/einsteiger/bild.map">
<IMG SRC="/bilder/bild_imagemap.gif" ISMAP></A>

Der erste Teil der URL /cgi-bin/htimage gibt an, daß das Imagemap-Programm "htimage" in dem cgi-bin-Verzeichnis des Servers zu finden ist, dieser Teil der URL sollte von Ihnen nicht verändert werden, außer Sie verwenden ein anderes CGI-Skript.
Der zweite Teil /anleitung/einsteiger/bild.map sagt aus, daß die auszuwertende Map-Datei "bild.map" in dem Unterverzeichnis "anleitunge/einsteiger/" Ihres Domains gespeichert ist. Dieser Teil ist variabel, bitte passen Sie ihn gemäß ihrem tatsächlichen Namen, bzw. Unterverzeichnis an

<zurück>

Imagemaps ab HTML 3.0

HTML 3.0 erlaubt die Erstellung von Imagemaps "offline", vorausgesetzt der eingesetzte Browser versteht die entsprechenden HTML-Befehle und kann diese auch umsetzen. Eine genaue Anleitung hierzu finden Sie unter:

http://www.meb.uni-bonn.de/html_tutorial/selfhtml.htm

Oder genauer:

http://www.meb.uni-bonn.de/html_tutorial/verwgraf.htm#a3

Sollten Sie über Microsoft Frontpage verfügen, so können Sie mit diesem Programm ebenfalls ein Client-Side-ImageMap erstellen. Nähere Informationen zur Vorgehensweise finden Sie in Ihrem Frontpage Handbuch.

<zurück>